<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改轮播图配置')" />
	<style>
		.file {
			position: relative;
			display: inline-block;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			overflow: hidden;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 20px;
		}
		.file input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
		}
		.file:hover {
			background: #AADFFD;
			border-color: #78C3F3;
			color: #004974;
			text-decoration: none;
		}
		.showImg{
			width: 200px;
			height: 100px;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-bannerInfoConfig-editor" th:object="${bannerInfoConfig}">
		<input id="bannerId" name="productId" th:field="*{bannerId}"  type="hidden">
		<div class="form-group">
			<label class="col-sm-3 control-label">类型：</label>
			<div class="col-sm-8">
				<div class="input-group" style="width: 100%">
					<select name="type" class="form-control m-b" th:with="type=${@dict.getType('sys_bannel_type')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{type}"></option>
					</select>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label"><span style="color: red; ">*</span>名称：</label>
			<div class="col-sm-8">
				<input name="bannerName" type="text" class="form-control required" th:field="*{bannerName}" required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label"><span style="color: red; ">*</span>跳转URL：</label>
			<div class="col-sm-8">
				<input name="openUrl" type="text" class="form-control required" th:field="*{openUrl}" required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">轮播图：</label>
			<div class="col-sm-8">
				<div class="showImg">
					<img id="previewImg" style="height: 90px;width: 180px;" src=""/>
				</div>
				<a href="javascript:;" class="file">选择文件
					<input id="_imgUrl" name="_imgUrl" type="file">
				</a>
				<span>必传，长方形</span>
				<input id="bannerUrl" th:field="*{bannerUrl}" name="bannerUrl" class="form-control" type="hidden">
			</div>
		</div>
	</form>
</div>

<th:block th:include="include :: footer" />
<script type="text/javascript">
	var bannerUrl ='[[${bannerInfoConfig.bannerUrl}]]';
	document.getElementById("previewImg").src=bannerUrl;
	$("#_imgUrl").change(function () {
		//创建blob对象，浏览器将文件放入内存中，并生成标识
		var file = $(this)[0].files[0];
		var img_src = URL.createObjectURL(file);
		//给img标检的src赋值
		document.getElementById("previewImg").src=img_src;
		$("#previewImg").css("visibility","visible");
		//URL.revokeObjectURL(img_src);// 手动 回收，
		var data = new FormData();
		data.append("file", file);
		$.ajax({
			type: "POST",
			url: ctx + "common/upload",
			data: data,
			cache: false,
			contentType: false,
			processData: false,
			dataType: 'json',
			success: function(result) {
				if (result.code == web_status.SUCCESS) {
					$.modal.alert('上传成功！');
					$('#bannerUrl').val( result.url );
				} else {
					$.modal.alertError(result.msg);
				}
			},
			error: function(error) {
				$.modal.alertWarning("图片上传失败。");
			}
		});
	});


	function submitHandler() {
		if ($.validate.form()) {
			var prefix = ctx + "channel/bannerInfoConfig";
			$.operate.save(prefix + "/edit", $('#form-bannerInfoConfig-editor').serialize());
		}
	}
</script>
</body>
</html>
